<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="imgs/huawei.ico"/>
     <!-- 1. 引入bootstrap.css -->
     <link rel="stylesheet" href="../plugins/bootstrap-3.4.1-dist/css/bootstrap.css">

    <title>商城购物车</title>

    <style>
        img{
            width: 80px;
            height: 80px;
        }
    </style>
</head>
<body>
      <!-- 导航begin -->
      <div class="container-fluid">
        <!-- 定义一行 -->
        <div class="row">
            <nav class="navbar navbar-inverse" role="navigation">
                <div class="container-fluid"> 
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse"
                            data-target="#example-navbar-collapse">
                        <span class="sr-only">切换导航</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">华为商城</a>
                </div>
                <div class="collapse navbar-collapse" id="example-navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="login.html">登录</a></li>
                        <li><a href="index.html">首页</a></li>
                        <li class="active"><a href="cart.html">我的购物车</a></li>
                        <li><a href="#">我的订单</a></li>
                        <li><a href="#">安全退出</a></li>
                        <li><img src="../imgs/001.png" style="width: 50px;height: 50px;border-radius: 50%;" alt=""></li>
                    </ul>
                </div>
                </div>
            </nav>
        </div>
    </div>
    <!-- 导航end -->

    <div class="container-fluid">
        <div class="row">
            <div class="table-responsive">
                <table class="table">
                  <caption>我的购物车</caption>
                  <thead>
                    <tr>
                      <th><input type='checkbox' id="ck_all" onclick="select_all(this)"></th>
                      <th>序号</th>
                      <th>产品名称</th>
                      <th>产品图</th>
                      <th>产品单价</th>
                      <th>产品说明</th>
                      <th>操作选项</th>
                    </tr>
                  </thead>
                  <tbody id="cart">
                     
                  </tbody>
                </table>
              </div>
        </div>
    </div>

    <!-- 必须先引入jquery.min.js -->
    <script src="../plugins/jquery.min.js"></script>
    <!-- 引入bootstrap.js -->
    <script src="../plugins/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
    
    <script>
        $(function(){
            let json_str = localStorage.getItem("carts");
            //json字符串 - json对象
            let json_obj = JSON.parse(json_str);
            //数组
            let arr = json_obj.admin;
            //定义一个字符串
            let str = "";
            for(let i=0;i<arr.length;i++){
                str+="<tr>";
                str+="<td><input name='ck' type='checkbox'></td>";
                str+="<td>"+(i+1)+"</td>";
                str+="<td>"+arr[i].name+"</td>";
                str+="<td><img src='imgs/"+arr[i].url+"'></td>";
                str+="<td>"+arr[i].price+"</td>";
                str+="<td>"+arr[i].desc+"</td>";
                str+="<td><button type='button' class='btn btn-link'>删除</button></td>";
                str+="/<tr>";
            }

            $("#cart").html(str);
           
        })


        //全选和全不选
        function select_all(obj){
            //获取下面所有的ck
            let arr = document.getElementsByName("ck");
            if(obj.checked){
                for(let i=0;i<arr.length;i++){
                    arr[i].checked = true;
                }
            }else{
                for(let i=0;i<arr.length;i++){
                    arr[i].checked = false;
                }
            }
        }
    </script>
</body>
</html>